<template>
<div class='login'>
    <div class="header">
        <img src="@/assets/images/header1.png">
    </div>
    <div class="form">
            <div class="form-item">
            <input type="text" placeholder="图形验证码" v-model="captcha" > 
            <img src="http://localhost:3000/api/user/captcha"  @click="getCaptcha" style="height:4rem" ref="imgcode">

        </div>
        <div class="form-item" >
            <input type="text" placeholder="手机号" v-model="phone"  style="width:60%"> 
            <button  style="width:40%" v-if="!num" @click="getCode">获取验证码</button>
            <button  style="width:40%" v-else>重新发送({{num}}s)</button>
        </div>
          <div class="form-item">
            <input type="text" placeholder="手机验证码" v-model="code"> 
        </div>
      
           <div class="form-item">
               <button @click="phoneRequestApi">登录</button>
        </div>
          <div class="form-check">
               <router-link to="/userlogin">用户登录 <i class="iconfont icon-jiantou2"></i></router-link>
              
        </div>
    </div>
</div>

</template>

<script>
// 引入api方法
import {getPhoneCodeApi} from "@/api/index"

export default {
//import引入的组件需要注入到components对象中才能使用
components: {},
data() {
//这里存放数据
return {
    phone:"",
    captcha:"",
    code:"",
    num:0,
    timer:null
};
},
computed:{
    //验证手机号
    checkPhone(){
        return /^1[35789][0-9]{9}$/.test(this.phone);
    }
},
methods: {
    getCaptcha(){
        console.log(this.$refs.imgcode);
        this.$refs.imgcode.src="http://localhost:3000/api/user/captcha"
        this.captcha=""
    },
   async phoneRequestApi(){
await this.$store.dispatch('actPhoneLogin',{
           captcha:this.captcha,
           code:this.code,
           phone:this.phone
       })
    this.$router.push("/home")
   }
    ,
  async  getCode(){
        //获取短信验证码
    if(this.checkPhone){
        //如果条件成立说明手机号正确
        this.num=10;
    this.timer=setInterval(()=>{
        this.num--;
           if(this.num==0){
        clearInterval(this.timer)
    }
    },1000);
    //获取验证码
    let result=await getPhoneCodeApi('/user/sendcode',{
        phone:this.phone,
    },'post')
    console.log(result);
    }else {
        alert('手机号码格式不正确')
    }
    }
}
}
</script>
<style lang="less">
    .login{
        .header{
            display: flex;
            justify-content: center;
            margin-top: 3rem;
            img{
                width: 10rem;
                height: 10rem;
                border-radius: 50%;
                border: 10px solid rgba(133, 104, 104, 0.5);
            }
        }
        .form{
            width: 100%;
            height: 50rem;
            margin-left: 2rem;
            width: calc(100% - 4rem);
            .form-item{
                margin-top: 2rem;
              display: flex;
                input{
                    width: 100%;
                    height: 3.6rem;
                    text-indent: 1rem;
                       border-radius: 5px;
                }
                button{
                    width: 100%;
                    height: 4rem;
                      border-radius: 5px;
                    border: 0;
                    color: #fff;
                    background: #f92028;
                }
            }
            .form-check{
                margin-top: 4rem;
                display: flex;
                a{
                  width: 100%;
                    text-align: center;
                    font-size: 1.5rem;
                    color: #f92028;
                    font-weight: 500;
                }
            }
        }
    }
</style>